<template>
  <div class="recommendSongsHead">
    <div class="bg">
      <div class="back" @click="$router.go(-1)">
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <img :src="picUrl" class="bgImage">
       <div class="time">
        <div class="month">{{Month}}</div>
        <div class="day">{{'/'+Day}}</div>
       </div>
       <div class="lucky">查看今日运势
         <i class="iconfont icon-xiangyoujiantou"></i>
       </div>
    </div> 
  </div>
</template>

<script>
import {computed,reactive} from 'vue'
export default {
 props:{
   picUrl:{
     type:String,
     default:''
   }
 },
 setup(){
   const Month=computed(()=>{
     let myDate=new Date()
     return myDate.getMonth()+1
   })
   const Day=computed(()=>{
     let myDate=new Date()
    return myDate.getMonth()
   })
   return{
     Month,Day
   }
 }
}
</script>

<style scoped lang="less">
.recommendSongsHead{
  width: 7.5rem;
  .bg{
    .back{
      position: absolute;
      top:0.3rem;
      left:0.3rem;
      color:#fff;
      .iconfont{
        font-size:0.65rem;
      }
    }
    position: relative;
    width: 7.5rem;
    height: 4.5rem;
    .bgImage{
      width: 7.5rem;
      height: 4.5rem;
    }
    .time{
      position: absolute;
      right:0;
      bottom:0.8rem;
      width: 2rem;
      height: 1rem;
      color:#fff;
      display: flex;
      .month{
        font-size: 0.85rem;
      }
      .day{
        font-size: 0.4rem;
      }
    }
    .lucky{
      position: absolute;
      bottom:0.3rem;
      right:0.2rem;
      font-size:0.16rem;
      color:#fff;
      .iconfont{
        font-size:0.16rem;
      }
    }
  }
  
}
</style>